<template>
  <div class="background">
    <div class="content">
      <view class="up">
        <view class="left">
          <uni-icons
            type="arrow-left"
            color="#ffffff"
            size="20"
            @click="skip"
            link
          ></uni-icons>
          <text>邀请好友</text>
        </view>
        <view class="right">
          <text>佣金记录</text>
        </view>
      </view>
      <view class="code">
        <view class="Invitation">我的邀请码</view>
        <div class="dimension">
          <img :src="qrcodeUrl" alt="QR Code" class="QuickMark" />
        </div>
      </view>
      <view class="commission">
        <view class="Invitation">我的佣金</view>
        <view class="money">￥<text class="make">3.11</text> </view>
        <view class="figure">
          <view class="item">
            <view class="aa">有效佣金:</view>
            <view class="">38.0</view>
          </view>
          <view class="item">
            <view class="aa">确认中佣金:</view>
            <view class="">0.00</view>
          </view>
        </view>
        <view class="figure">
          <view class="item">
            <view class="aa">佣金比例:</view>
            <view class="">38.0</view>
          </view>
          <view class="item">
            <view class="aa">已注册人数:</view>
            <view class="">0.00</view>
          </view>
        </view>
      </view>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcode-generator";
import userApi from '@/api/user'
export default {
  data() {
    return {
      inviteLink: "https://lumapower.cn/pages/login/index", // 初始链接
      qrcodeUrl: "",
      invitationCode: ""
    };
  },
  mounted() {
    this.userinfo(); // 确保先获取用户信息和邀请码
  },
  methods: {
    async userinfo() {
      const res = await userApi.userinfo();
	  console.log(res);
      this.invitationCode = res.data.invitationCode;
      this.updateInviteLinkWithCode();
      this.generateQRCode();
    },
    updateInviteLinkWithCode() {
      if (this.invitationCode) {
        this.inviteLink = `${this.inviteLink}?invitationCode=${this.invitationCode}`;
      }
    },
    generateQRCode() {
      const qr = QRCode(0, "L");
      qr.addData(this.inviteLink);
      qr.make();
      const base64Image = qr.createDataURL(6, 0);
      this.qrcodeUrl = base64Image;
    },
    skip() {
      uni.switchTab({
        url: "/pages/personal/index",
      }).catch((error) => {
        console.error("跳转失败:", error);
      });
    },
  },
};

</script>

<style lang="scss" scoped>
.background {
  width: 100vw;
  height: 100vh;
  background-color: #14213d;
}

.content {
  width: 90%;
  margin-left: 7%;
  margin-top: 10px;
}

.up {
  width: 100%;
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left {
  width: 100px;
  display: flex;
  color: aliceblue;
  align-items: center;
  justify-content: space-between;
}

.right {
  width: 100px;
  display: flex;
  color: aliceblue;
  align-items: center;
  margin-left: 50%;
}

.Invitation {
  padding: 10px;
  color: aliceblue;
}
.dimension{
	width: 80%;
	margin-left: 10%;
	background-color: #fff;
	border-radius: 10px;
  
}
.QuickMark {
  width: 65vw;
  height: 30vh;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 10px;
}
.middle {
  width: 150px;
  text-align: center;
  background-color: #14213d;
  color: #fff;
  margin: 0 auto;
}

.link {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  background-color: #4080fe;
  margin-top: 10px;
}

.price {
  margin: 0 auto;
  width: 150px;
  color: #000;
}

.code {
  border-radius: 10px;
  width: 85vw;
  height: 43vh;
  background-color: #223255;
}

.commission {
  margin-top: 40px;
  border-radius: 10px;
  width: 85vw;
  height: 30vh;
  background-color: #223255;
}

.money {
  text-align: center;
  color: #fff;
}

.make {
  font-size: 27px;
  font-weight: 700;
}

.figure {
  margin-top: 10px;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  justify-content: space-around;
}
.aa {
  color: dodgerblue;
}
</style>
